<!-- Author:Rain -->
<template>
    <div class="new-guide-common__cont">
        <div class="new-guide-common__title"> 基础信息 1/6 </div>
        <div class="new-guide-common__progress">
            <div class="new-guide-common__progress-inner" style="width: 82px;"></div>
        </div>
        <div class="page-loading" style="display: none;">正在加载中...</div>
        <div class="new-guide-base-info" graystyletype="2">
            <form autocomplete="off" class="clearfix ui-form ui-form-label-top" slot="content">
                <div class="form-item form-item-required form-item-error">
                    <div class="item-label">姓名</div>
                    <div class="item-content">
                        <div class="name input-wrap input-wrap-text">
                            <!----><!----><input autocomplete="on" spellcheck="false" type="text" v-model="name"
                                placeholder="请输入2-12个汉字或4-24个字母" class="input"><!----><!----><!----><!---->
                        </div><!---->
                    </div>
                </div>
                <div class="form-item form-item-error">
                    <div class="item-label">性别</div>
                    <div class="item-content">
                        <div class="radio-group radio-group-rectangle">
                            <label class="radio radio-item" :class="guide_sex == '1' ? 'radio-checked' : ''"><span
                                    class="radio-inner"><input type="radio" class="radio-input" value="1"
                                        v-model="guide_sex"><i class="radio-edging"></i></span>男</label><label
                                class="radio radio-item" :class="guide_sex == '2' ? 'radio-checked' : ''"><span
                                    class="radio-inner"><input type="radio" class="radio-input" value="2"
                                        v-model="guide_sex"><i class="radio-edging"></i></span>女</label>
                        </div><!---->
                    </div>
                </div>
                <div class="form-item" ka="geek-birthday">
                    <div class="item-label">出生年月</div>
                    <div class="item-content">
                        <div class="datepicker-wrap" ka="resume_form_edit_birthday">
                            <div class="input-wrap"><!----><input placeholder="请填写出生年月" class="input"
                                    v-model="birthday"><!----><!----></div>
                            <!---->
                        </div>
                        <p class="birth-notice">
                            根据《劳动法》《未成年人保护法》等相关法律规定，申请注册<b>睿职业启明星</b>，请选择与你身份证一致的真实年龄并确保你已年满16周岁。 </p>
                        <!---->
                    </div>
                </div>
                <div class="form-item">
                    <div class="item-label">身份</div>
                    <div class="item-content">
                        <div class="radio-group radio-group-rectangle" id="new-guide-base-info__intentionType">
                            <label class="professional radio radio-item radio-checked" :class="{'selected':identity=='职场人'}"   title="职场人指有正式工作经验的人群"
                                style="background-position: -1170px 0px;">
                                <span class="radio-inner">
                                    <input type="radio" class="radio-input" value="职场人" name="status" v-model="identity">
                                    <i class="radio-edging"></i></span>0</label>
                            <label class="student radio radio-item" :class="{'selected':identity=='学生'}" title="学生包含在校生、应届生、往届生"
                                style="background-position: -1638px 0px;"><span class="radio-inner">
                                    <input name="status" type="radio" class="radio-input" value="学生"  v-model="identity">
                                    <i class="radio-edging"></i></span>3</label>
                        </div>
                        <!---->
                    </div>
                </div>
                <div class="form-item form-item-required form-item-error" ka="geek-birthday">
                    <div class="item-label">首次参加工作时间</div>
                    <div class="item-content">
                        <div class="datepicker-wrap workdate-picker">
                            <div class="input-wrap"><!----><input v-model="firstJob" placeholder="参加工作时间" autocomplete="off"
                                    class="input"><!----><!----></div>
                        </div><!---->
                    </div>
                </div>
                <div class="form-item form-item-error">
                    <div class="item-label">求职状态</div>
                    <div class="item-content">
                        <div class="job-status radio-group radio-group-rectangle">
                            <div class="mb-20">
                                <label :class="status == 1 ? 'radio-checked' : ''" class="radio radio-item"><span
                                        class="radio-inner"><input type="radio" class="radio-input" value="1"
                                            v-model="status"><i class="radio-edging"></i></span> 离{{identity=="职场人"?"职":'校'}}-随时到岗
                                </label>
                                <label class="radio radio-item" :class="status == 2 ? 'radio-checked' : ''"><span
                                        class="radio-inner"><input type="radio" class="radio-input" value="2"
                                            v-model="status"><i class="radio-edging"></i></span> 在{{identity=="职场人"?"职":'校'}}-月内到岗 </label>
                            </div>
                            <div>
                                <label :class="status == 3 ? 'radio-checked' : ''"
                                    class="job-status-common radio radio-item"><span class="radio-inner"><input type="radio"
                                            class="radio-input" value="3" v-model="status"><i
                                            class="radio-edging"></i></span>在{{identity=="职场人"?"职":'校'}}-考虑机会</label>
                                <label :class="status == 4 ? 'radio-checked' : ''"
                                    class="job-status-common radio radio-item"><span class="radio-inner"><input type="radio"
                                            class="radio-input" value="4" v-model="status"><i
                                            class="radio-edging"></i></span>在{{identity=="职场人"?"职":'校'}}-暂不考虑</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
let name = ref("")//姓名
let guide_sex = ref("")//性别
let birthday = ref("")//出生年月
let identity = ref("")//身份，如果是职场人，首次参加工作的时间要填写
let firstJob = ref("")//学生没有工作经历
let status = ref<number>(0)//求职状态


onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  let guideInfo=JSON.parse(localStorage.getItem("guideInfo") as string)
  //去本地存储中把数据取出来！！！
  let {"guide-1":guide}=guideInfo
  name.value=guide.name
  guide_sex.value=guide.guide_sex
  birthday.value=guide.birthday
  identity.value=guide.identity
  firstJob.value=guide.firstJob
  status.value=guide.status
})


onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  let guideInfo=JSON.parse(localStorage.getItem("guideInfo") as string)
  guideInfo["guide-1"]={
    name:name.value,
    guide_sex:guide_sex.value,
    birthday:birthday.value,
    identity:identity.value,
    firstJob:firstJob.value,
    status:status.value
  }
  localStorage.setItem("guideInfo",JSON.stringify(guideInfo))
})

</script>

<style scoped>
@import url("@/assets/guideCommon.css");
/* 出生年月 */
.new-guide-base-info .birth-notice {
    font-size: 12px;
    line-height: 17px;
    color: #aaa;
    margin-top: 4px;
}

/* 身份 */
#new-guide-base-info__intentionType .radio-item {
    font-size: 0;
    width: 234px;
    height: 200px;
    border: 1px solid transparent;
    box-sizing: border-box;
    background: url(https://img.bosszhipin.com/static/file/2023/5mc5ikngtk1683518395691.png);
    background-repeat: no-repeat;
    background-size: 1872px 200px;
    transition: none;
}

#new-guide-base-info__intentionType .radio-item:hover,#new-guide-base-info__intentionType .selected {
    background-color: #e1f7f7;
    border-color: var(--themeColor);
}

/* 状态 */
.new-guide-base-info .mb-20 {
    margin-bottom: 20px;
}

</style>